<template>
  <div class="profile-page">
    <el-card class="profile-card">
      <template #header>
        <div class="card-header">
          <el-icon class="header-icon"><User /></el-icon>
          <span>个人中心</span>
        </div>
      </template>

      <div class="profile-content">
        <div class="user-info-section">
          <el-avatar :size="80" class="user-avatar">
            <el-icon><User /></el-icon>
          </el-avatar>
          <div class="user-details">
            <h3>{{ userStore.getName }}</h3>
            <p class="user-email">
              {{
                userStore.userInfo && userStore.userInfo.email
                  ? userStore.userInfo.email
                  : "未设置邮箱"
              }}
            </p>
            <el-tag type="success" v-if="userStore.isLoggedIn">已登录</el-tag>
          </div>
        </div>

        <el-divider />

        <div class="profile-actions">
          <el-button type="primary" @click="editProfile">
            <el-icon><Edit /></el-icon>
            编辑资料
          </el-button>
          <el-button @click="changePassword">
            <el-icon><Lock /></el-icon>
            修改密码
          </el-button>
          <el-button type="danger" @click="logout">
            <el-icon><SwitchButton /></el-icon>
            退出登录
          </el-button>
        </div>

        <el-divider />

        <div class="account-stats">
          <h4>账户统计</h4>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="stat-item">
                <div class="stat-number">{{ stats.totalTasks || 0 }}</div>
                <div class="stat-label">总任务数</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stat-item">
                <div class="stat-number">{{ stats.completedTasks || 0 }}</div>
                <div class="stat-label">已完成</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stat-item">
                <div class="stat-number">{{ stats.pendingTasks || 0 }}</div>
                <div class="stat-label">待完成</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/userStore";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  User,
  Edit,
  Lock,
  SwitchButton,
  Loading,
} from "@element-plus/icons-vue";
import request from "@/utils/request";

const router = useRouter();
const userStore = useUserStore();
const stats = ref({
  totalTasks: 0,
  completedTasks: 0,
  pendingTasks: 0,
});

const editProfile = () => {
  // ElMessage.info("编辑资料功能开发中...");

  router.push("/profile/change");
};

const changePassword = () => {
  ElMessage.info("修改密码功能开发中...");
};

const logout = async () => {
  try {
    await ElMessageBox.confirm("确定要退出登录吗？", "确认退出", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });

    userStore.logout();
    ElMessage.success("已退出登录");
    router.push("/login");
  } catch (error) {
    if (error !== "cancel") {
      console.error("退出登录失败:", error);
    }
  }
};

const fetchUserStats = async () => {
  if (!userStore.isLoggedIn) return;

  try {
    const data = await request.get("/api/todo");
    stats.value = {
      totalTasks: data.length,
      completedTasks: data.filter((task) => task.completed).length,
      pendingTasks: data.filter((task) => !task.completed).length,
    };
  } catch (error) {
    console.error("获取用户统计失败:", error);
  }
};

onMounted(() => {
  fetchUserStats();
});
</script>

<style scoped>
.profile-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.profile-card {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
}

.header-icon {
  font-size: 24px;
  color: #409eff;
}

.profile-content {
  padding: 20px 0;
}

.user-info-section {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}

.user-avatar {
  background: linear-gradient(135deg, #409eff 0%, #36a3f7 100%);
  color: white;
  font-size: 32px;
}

.user-details h3 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #303133;
}

.user-email {
  margin: 0 0 12px 0;
  color: #909399;
  font-size: 14px;
}

.profile-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.account-stats h4 {
  margin: 0 0 20px 0;
  color: #303133;
  font-size: 16px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: #e9ecef;
  transform: translateY(-2px);
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-page {
    padding: 16px;
  }

  .user-info-section {
    flex-direction: column;
    text-align: center;
  }

  .profile-actions {
    justify-content: center;
  }

  .stat-number {
    font-size: 24px;
  }
}
</style>
